import React, { useState } from 'react'
import '../scss/DouTo.scss'
import { Col, Input, Row, Button } from 'antd';
import {
  HomeOutlined,
  CloudUploadOutlined,
  SearchOutlined
} from '@ant-design/icons';
import DotoList from './DotoList'
import { GetdotoSearch } from '../../../../http/dutoApi'
import { useDispatch, useSelector } from 'react-redux'
import { GetdotoSearchAsyncAction } from '../../../../store/dotoStore/action'


export default function DouTo() {
  const [search3, setsearch3] = useState('')
  const [search2, setsearch2] = useState('')
  const [search4, setsearch4] = useState('')
  // const [searchData,setsearchData] = useState([])

  // 页数
  const [pageSize, setPageSize] = useState('5')
  const [pageSizeNow, setPageSizeNow] = useState('1')

  const dispatch = useDispatch()


  const onChange = (e) => {
    // console.log(e.target.value);
    setsearch3(e.target.value)
  }
  const onChange2 = (e) => {
    // console.log(e.target.value);
    setsearch2(e.target.value)
  }
  const onChange3 = (e) => {
    console.log(e.target.value);
    setsearch4(e.target.value)
  }

  const search = () => {
    console.log('submint');
    // GetdotoSearch('1','5',search2,search3,search4)
    dispatch(GetdotoSearchAsyncAction({
      pageSizeNow,
      pageSize,
      search2,
      search3,
      search4
    }))
      .then((res) => {
        console.log("请求成功", res)
      })
      .catch((err) => {
        console.log('请求失败', err);
      })
  }

  return (
    <div className='DouTo'>

      <div className='icon'>
        <HomeOutlined className='home' />
        <p>首页 / 催收管理 / 即将到期列表</p>
      </div>

      <div className='search'>
        <Row gutter={24}>
          <Col span={6}>
            <Input defaultValue="" placeholder='姓名/手机号' onChange={onChange} />
          </Col>
          <Col span={6}>
            <Input defaultValue="" placeholder='借款编号' onChange={onChange2} />
          </Col>
          <Col span={6}>
            <Input defaultValue="" placeholder='合同号' onChange={onChange3} />
          </Col>
          <Button type="default" onClick={search}>
            <SearchOutlined /> 查询
          </Button >
        </Row>
      </div>

      <div className='title'>
        <p>数据列表</p>
        <Button className='button'><CloudUploadOutlined className="icon" />上传</Button>
      </div>

      <DotoList className="DotoList" />

    </div>
  )
}
